<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
          <link rel="stylesheet" type="text/css" href="css/register/link.css"/>
          <link rel="stylesheet" type="text/css" href="css/register/layui.css"/>
          <link rel="stylesheet" type="text/css" href="css/register/jigsaw.css"/>
          <style type="text/css">
          		.newtel{margin-bottom: 14px;}
          		.disabled{background: #d0d0d4 !important;}
          </style>
	</head>
	<body>

		<div class="rebinding-box">
			<div class="box-title">
				<h2 class="mtb5">注册账号</h2>
				<i>为了保障您的帐户安全，请先进行安全验证</i>
			</div>
			<div class="box-timeline">
				<ul class="text-center" style="width: 800px;" >
					<li>
						填写注册信息
						<div class="box-num1">
							1
						</div>
						
					</li>
					<li class="ml45">
						验证邮箱地址
						<div class="box-outside1 outside1ab" id="outside1abs">
							<div class="box-num2 num2ab">
							  2
						    </div>
						</div>
					</li>
					<li class="ml45">
						完成
						<div class="box-outside2 outside2a" id="outside2as">
							<div class="box-num3 num3a" >
							 3
						   </div>
						</div>
					</li>
					<div class="clear">
						
					</div>
				</ul>
				
				
			</div>
			<!--第一步-->
			<div class="onebox-form" id="oneform">
				<div class="oneform">
					<div class="oneform-box">
	                     <div class="newtel">
							 <label class="oneform-label">昵称</label>
							 <div class="oneform-input">
	                             <input type="password" id="name"  autocomplete="off" placeholder="昵称" >
	                          </div>
	                      </div>
	                     <div class="newtel">
							 <label class="oneform-label">登录密码</label>
							 <div class="oneform-input">
	                             <input type="password" id="pwd"  autocomplete="off" placeholder="请填写登录密码" >
	                          </div>
	                      </div>
	                      <div class="newtel">
							 <label class="oneform-label">确认密码</label>
							 <div class="oneform-input">
	                             <input type="password" id="supwd"  autocomplete="off" placeholder="确认登录密码" >
	                          </div>
	                      </div>
	                      
	                      <div class="newtel">
							 <label class="oneform-label">手机号码</label>
							 <div class="oneform-input">
	                             <input type="text" id="tel"  autocomplete="off" placeholder="手机号码" >
	                          </div>
	                      </div>
	                      <div id="captcha" style="position: relative;margin-left: 20%"></div>
  						  <div id="msg" style="margin-left: 20%"></div>
					</div>
				   <div class="onebtn-box">
                      <button class="onebtn disabled" id="onebtn" onclick="fun()" disabled="disabled" >下一步</button>
                  </div>
				</div>
			</div>
			<!--第二步-->
			<div class="twobox-form" id="twoform">
				<form class="twoform">
					<div class="twoform-box">
						<div class="newtel">
							<label class="twoform-label">邮箱地址</label>
						   <div class="twoform-input">
                             <input type="text" id="email"  autocomplete="off" placeholder="请输入邮箱地址">
                          </div>
						</div>
						<div class="validatecode">
                          <label class="twoform-label2">验证码</label>
                          <div class="twoform-input2">
                             <input type="text"  autocomplete="off" placeholder="请输入验证码">
                             
                          </div>
                          <button class="sendcode" onclick="settime(this)">获取验证码</button>
                           
						</div>
					</div>
				</form>
				<div class="twobtn-box">
                      <button class="twobtn" id="twobtn" onclick="fun1()">下一步</button>
                  </div>
			</div>
			<!--第三步-->
			<div class="threebox-form" id="threeform">
				<div class="successr">
					<div class="symbol">
						
					</div>
					<p>恭喜您，注册成功！</p>
					<button class="confirm">确认</button>
				</div>
			</div>
		</div>
		
	</body>
	 <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	 <script src="js/layui.js" type="text/javascript" charset="utf-8"></script>
	 <script src="js/register/jigsaw.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript">
	     var countdown=60; 
	     function settime(val) { 
		     if (countdown == 0) { 
		    	 $(val).removeClass("disabled");
			     val.removeAttribute("disabled");    
			     val.innerHTML="获取验证码"; 
			     countdown = 60; 
			     return;
		     } else { 
		    	 $(val).addClass("disabled");
			     val.setAttribute("disabled", true); 
			     val.innerHTML="重新发送(" + countdown + ")"; 
			     countdown--; 
		     } 
	     	setTimeout(function() { 
		     	settime(val) 
		    },1000) 
	    } 
     
     
     	jigsaw.init(document.getElementById('captcha'), function () {
     		$('#onebtn').removeClass("disabled");
     		$('#onebtn').removeAttr("disabled");
    	},function(){
    		$('#onebtn').addClass("disabled");
     		$('#onebtn').attr("disabled","disabled");
    	})
     
     	var onebtns=document.getElementById("onebtn");
     	var twobtns=document.getElementById("twobtn");
     	var soutside1ab=document.getElementById("outside1abs");
     	var soutside2as=document.getElementById("outside2as");
        var oneforms=document.getElementById("oneform");
        var twoforms=document.getElementById("twoform");
        var threeforms=document.getElementById("threeform");
     	function fun(){
     	var	pasvals=document.getElementById("pwd").value;
     	   isPasswd(pasvals);
     		function isPasswd(s) { 
                var patrn=/^(\w){6,20}$/; 
                if (!patrn.exec(s))
                {
                	alert("只能输入6-20个字母、数字、下划线" )
                 return false
                }else{
		     		soutside1ab.classList.remove("outside1ab");
		     		oneforms.style.display="none";
		     		twoforms.style.display="block";
                }
                }    		
     	}
        function fun1(){
	    		var str=document.getElementById("email").value;
			 	isPoneAvailable(str);
			 	function isPoneAvailable(str) {  
		          var myreg=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;  
		          if (!myreg.test(str)) {  
		              alert("请输入正确的邮箱地址")
		              return false;
          		} else { 
          threeforms.style.display="block";
          twoforms.style.display="none";
          soutside2as.classList.remove("outside2a");
          }  
      } 
	 }
     </script>
</html>

